import { ProTableColumn } from '@/components/pro-table/type'
import { NButton, NPopconfirm, NSwitch } from 'naive-ui'
import { Ref } from 'vue'

type props = {
  handleEditUser: (row: any) => void
  fetchDelUser: (id: number) => void
  changeUserStatus: (row: any) => void
  handleSetNewPwd: (row: any) => void
  handleEditUserRole: (row: any) => void
  orgOptions: Ref<any[]>
  userStatusLoading: Ref<boolean>
}

export const useUserProTable = ({
  handleEditUser,
  fetchDelUser,
  changeUserStatus,
  handleSetNewPwd,
  handleEditUserRole,
  orgOptions,
  userStatusLoading
}: props) => {
  // const currentEditUserId = ref<any>(0)
  const columns = computed<ProTableColumn[]>(() => [
    {
      title: '用户名',
      key: 'userName',
      query: {
        type: 'input'
      }
    },
    {
      title: '真实姓名',
      key: 'realName',
      query: {
        type: 'input'
      }
    },
    {
      type: 'dict',
      title: '性别',
      key: 'sex',
      dictOptions: [
        {
          value: '1',
          label: '男'
        },
        {
          value: '2',
          label: '女'
        }
      ]
    },
    {
      title: '手机号',
      key: 'phone'
    },
    {
      type: 'dict',
      title: '所属部门',
      key: 'orgId',
      dictOptions: orgOptions.value
    },
    // {
    //   type: 'tag',
    //   title: '是否锁定',
    //   key: 'accountNonLocked',
    //   dictOptions: [
    //     {
    //       value: true,
    //       label: '否',
    //       type: 'primary'
    //     },
    //     {
    //       value: false,
    //       label: '是',
    //       type: 'warning'
    //     }
    //   ]
    // },
    // {
    //   title: '是否启用',
    //   key: 'enabled',
    //   visiable: useHasPermi('user:edit'),
    //   render(row) {
    //     return (
    //       <NSwitch
    //         rubberBand={false}
    //         value={!!row.enabled}
    //         loading={
    //           currentEditUserId.value == row.id && userStatusLoading.value
    //         }
    //         onUpdateValue={() => {
    //           currentEditUserId.value = row.id
    //           changeUserStatus(row)
    //         }}
    //       >
    //         {{
    //           checked: () => '已启用',
    //           unchecked: () => '已禁用'
    //         }}
    //       </NSwitch>
    //     )
    //   }
    // },
    // {
    //   title: '创建时间',
    //   key: 'createTime',
    //   ellipsis: {
    //     tooltip: true
    //   }
    // },
    {
      type: 'operation',
      title: '操作',
      key: 'actions',
      width: 300,
      render(row) {
        return (
          <>
            <div>
              <NButton
                size="small"
                type="primary"
                quaternary
                onClick={() => handleEditUser(row)}
              >
                修改信息
              </NButton>
              <NButton
                size="small"
                type="primary"
                quaternary
                onClick={() => handleEditUserRole(row)}
              >
                授予角色
              </NButton>
              <NButton
                size="small"
                type="primary"
                quaternary
                onClick={() => handleSetNewPwd(row)}
              >
                修改密码
              </NButton>
              <NPopconfirm
                onPositiveClick={() => fetchDelUser(row.userId as number)}
              >
                {{
                  trigger: () => (
                    <NButton size="small" type="error" quaternary>
                      删除
                    </NButton>
                  ),
                  default: () => '您确定要删除？'
                }}
              </NPopconfirm>
            </div>
          </>
        )
      }
    }
  ])

  return {
    columns
  }
}
